{include file="public/header" title="完善资料"/}
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">完善资料</h1>
</header>
<div class="mui-content">
    <div class="mui-card" id="step_one">
        <form class="layui-form mui-input-group">
            <div class="mui-input-row">
                <label>姓名</label>
                <input type="text" name="name" class="mui-input-clear" placeholder="You name">
            </div>
            <div class="mui-input-row">
                <label>手机号码</label>
                <input type="number" name="mobile" id="mobile" class="mui-input-clear" placeholder="You mobile">
            </div>
            <div class="mui-input-row">
                <label>验证码</label>
                <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" style="width: 105px;float: right"
                        id="code"
                        data-loading-text="发送中">获取验证码
                </button>
                <input type="number" name="code" class="mui-input-clear" placeholder="Mobile code"
                       style="width:calc(65% - 105px);">
            </div>
            <div class="mui-input-row">
                <label>省/市/区</label>
                <input type="hidden" name="province" id="province">
                <input type="hidden" name="city" id="city">
                <input type="hidden" name="area" id="area">
                <input type="hidden" name="id" value="{$user['id']}">
                <span id="result" style="display: block;line-height: 37px;"><font color="#848484">请选择</font></span>
            </div>
            <div class="mui-button-row">
                <button class="mui-btn mui-btn-primary" style="width: 90%;" type="button" lay-submit
                        lay-filter="theFirstStep">确 认
                </button>
            </div>
        </form>
    </div>
</div>
<script src="/static/mui/js/city.data-3.js"></script>
<script>
    var $ = layui.$, form = layui.form;
    mui.init();

    /**
     * 获取验证码
     */
    $('#code').click(function () {
        var mobile = $('#mobile').val(), _this = $(this);
        if (!mobile) {
            mui.toast('请输入手机号码', {duration: 'short', type: 'div'});
            return false;
        }
        if (!(/^1[34578]{1}[0-9]{9}/).test(mobile)) {
            mui.toast('请输入正确的手机号', {duration: 'short', type: 'div'});
            return false;
        }
        _this.attr('disabled', true);
        mui('#code').button('loading');//切换为loading状态
        var number = 5;
        $.post("{:url('get_code')}", {mobile: mobile}, function (result) {
            mui.toast(result.msg, {duration: 'short', type: 'div'});
            if (result.code == 200) {
                //TODO::接通短信验证码时取消
                $('input[name=code]').val(result.data);
                var co = setInterval(function () {
                    --number;
                    if (number >= 1) {
                        _this.html('重新获取(' + number + 's)')
                    } else {
                        clearInterval(co);
                        _this.attr('disabled', false);
                        mui('#code').button('reset');
                    }
                }, 1000);
            } else {
                _this.attr('disabled', false);
            }
        });
    });

    /**
     * 完善资料
     */
    form.on('submit(theFirstStep)', function (data) {
        var data = data.field;
        if (!data.name) {
            mui.toast('请输入姓名', {duration: 'short', type: 'div'});
            return false;
        }
        if (!data.mobile) {
            mui.toast('请输入手机号码', {duration: 'short', type: 'div'});
            return false;
        }
        if (!(/^1[34578]{1}[0-9]{9}/).test(data.mobile)) {
            mui.toast('请输入正确的手机号', {duration: 'short', type: 'div'});
            return false;
        }
        if (!data.province) {
            mui.toast('请选择省/市/区', {duration: 'short', type: 'div'});
            return false;
        }
        if (!data.code) {
            mui.toast('请输入验证码', {duration: 'short', type: 'div'});
            return false;
        }
        console.log(data);
        $.post("{:url('step_one')}", data, function (result) {
            console.log(result);
            mui.toast(result.msg, {duration: 'short', type: 'div'});
            if (result.code == 200) {
                setTimeout(function () {
                    location.href = "{:url('index/index/index')}";
                }, 2000);
            }
        });

        return false;
    });

    /**
     * 选择省市区
     */
    $('#result').click(function () {
        var picker = new mui.PopPicker({layer: 3});
        picker.setData(cityData3);
        picker.show(function (selectItems) {
            $('#province').val(selectItems[0].text);
            $('#city').val(selectItems[1].text);
            var text = selectItems[0].text + '-' + selectItems[1].text;
            if (selectItems[2].text !== undefined) {
                text += '-' + selectItems[2].text;
                $('#area').val(selectItems[2].text);
            }
            $('#result').html(text);
        })
    });
</script>

{include file="public/footer"/}